<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>
<style>
    ul {
        list-style: none;
    }
</style>

<body>
    <!-- 
        请补全JavaScript代码，实现以下效果：
        1. 选中"全选"框，以下所有选项全部勾选。
        2. 把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
        3. 当其他复选框全部选中，"全选框"为选中状态。
        4. 当其他复选框有一个未选中，"全选框"取消选中状态。
        注意：
        1. 必须使用DOM0级标准事件（onchange）
     -->
    <ul>
        <li>全选<input type='checkbox' id='all'></li>
        <li>Java<input type='checkbox' class='item'></li>
        <li>javaScript<input type='checkbox' class='item'></li>
        <li>C++<input type='checkbox' class='item'></li>
        <li>python<input type='checkbox' class='item'></li>
        <li>.net<input type='checkbox' class='item'></li>
    </ul>

    <script>
        // 补全代码

        let all = document.querySelector('#all')
        let options = Array.from(document.querySelectorAll('.item'))
        all.onchange = function () {
            if (all.checked) {
                // 未选中全选
                // 有的选项没选中
                options.forEach(item => {
                    item.checked = true
                })


            } else {
                // 全选选中时
                // 取消选中
                for (let i = 0; i < options.length; i++) {
                    options[i].checked = false

                }
            }
        }
        // 3.监听 其他复选框的变化事件
        options.forEach(item => {
            item.onchange = function () {
                // 标记是否全选的变量
                var isCheckAll = true;
                options.forEach(item => {
                    if (item.checked === false) {
                        isCheckAll = false;
                    }
                })
                // 将标记传给all的checked属性
                all.checked = isCheckAll;
            }
        })

        /*
        // 补全代码
        var all = document.querySelector('#all')
        // 将类数组使用from转化为真正的数组才能使用every
        var options = Array.from(document.querySelectorAll('.item'))
        all.onchange = () => {
            options.forEach(x => x.checked = all.checked)
        }
        options.forEach((item)=>{
            item.onchange = function() {
                all.checked = options.every(x => x.checked)
            }
        })

        */
    </script>
</body>

</html>